<template>
	<view class="content">
	
		<scroll-view class="showbox" scroll-y="true">
			  <view v-for="(item,index ) in goodsList" :key="item.id" class="imgItem" v-show="item.addState">
		
				 <image :src="$host+item.src" mode="widthFix"></image>
			 <view  class="right">
				 <view>
				 				    <view class="titles">{{item.title}}</view>
				 </view>
				 <view class="botoom">
				 				 <view class="money">￥{{item.money}}</view>     
								 <view class="addbox">
									 
									 <view class="jian" @click="subtract" :data-index="{id:item.id,count:item.count}"
									  v-show="item.addState">-</view>
									 <text class="number" v-show="item.addState">{{item.count}}
									 </text><view  class="add" @click="add"
									  :data-index="{id:item.id,count:item.count,addState:item.addState}">＋</view>
								 </view>
				 </view>
				  </view>
			 </view>
	</scroll-view>
		<view class="footer">
			
			<view class="total">
				<text>合计</text><text class="getA">￥{{totalmoney}}</text><text class="getB">(共{{goodnumber}}件)</text>
			</view>
			<view class="buygood">
				<text class="getC" @click="tobuy">下单</text>
			</view>
			
		</view>
	
			
	</view>
	
</template>

<script>
	import {mapState} from "vuex"
	export default{
		data(){
			
			return{
				$host:this.$host,
				goodsList:[],
				goodslength:0,
				totalmoney:0,
				goodnumber:0,
				id:[]
				
			}
		},
		methods:{
			
			tobuy(){
				uni.navigateTo({
					url:"/pages/shopCars/tobuy"
				})
				
				
			}
			,
				open() {
				
					uni.redirectTo({
						url:"/pages/shopCars/noShop"
					})	
					} ,
			getgoodLength(){
			
				this.$request("/getClassData", "post", {}).then(res => {
					
			     this.goodslength=res.data.filter(item=>item.addState==1).length
				        	
				})
				
			}
			,
			getgoodsList(){
				    
				this.$request("/getGoodsListdata","post",{}).then(res=>{
					                    this.goodsList=[]
								     this.goodsList=res.data
									 	let total=0
										let number=0
									 for(let i=0;i<this.goodsList.length;i++){
										 
									total+=(this.goodsList[i].count*this.goodsList[i].money)
									  number+=parseInt(this.goodsList[i].count )   
									 }
									this.totalmoney=total
									this.goodnumber=number
									   this.getgoodLength()
									 
				})
							
			}
			,
			add(e){
				this.$request("/add","post",{id:e.currentTarget.dataset.index.id,count:parseInt(e.currentTarget.dataset.index.count)+1
				,addState:true}).then(resp=>{
					  this.getgoodsList()
					
				})
				
			},
			 subtract(e){
			
	             if(e.currentTarget.dataset.index.count>1){
	             			   this.$request("/subtract","post",{id:e.currentTarget.dataset.index.id,count:parseInt(e.currentTarget.dataset.index.count)-1,addState:true}).then(res=>{
	             			   	 this.getgoodsList()
	             			
	             				   
	             					
	             				  
	             			   	 
	             			   })	   
	             }else if(e.currentTarget.dataset.index.count<=1){
	             			         
	             			this.$request("/subtract","post",{id:e.currentTarget.dataset.index.id,count:0, addState:false}).then(res=>{
								
	             				  this.getgoodsList()	
																	   
	             			})
	             			
	             					
	             					 
	             }
				 if(this.goodslength<=1){
					  uni.redirectTo({
					  	url:"/pages/shopCars/noShop"
					  })
				 }
				 
		}
		
		
		},
		
		
		onShow(){
			 this.getgoodsList()
			 this.getgoodLength()
		}
	 
	}
</script>

<style>
	.buygood{
		position: relative;
		top: 56rpx;
		height: 80px;
		
	}
	.getC{
		border-radius:22px 0px 0px 22px ;
		background-color: #fe9a69;
		font-size: 36rpx;
		color: white;
		padding: 16rpx 65rpx;
	}
	.getB{
		 font-size: 23rpx;
		 position: relative;
		 top: 6rpx;
		 margin-left: 8rpx;
	}
	.getA{
		color: #fe9a69;
	}
	.footer{
		width: 100%;
		height: 40px;
		background-color: white;
		position: fixed;
		bottom: 0px;
		left: 0px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.total{
		display: flex;
		justify-content: space-around;
		
	}
	.content{
		width: 100%;
		height: 100vh;
		background-color:#f4f4f4 ;
	}
	.title{
		display: flex;
		justify-content: space-between;
		height: 72rpx;
		background-color: white;
		width: 100%;
	
	}
	.right{
		color: #8e8e8e;
		font-size: 24rpx;
		margin-right: 20rpx;
		
	}
	.right>image{
		width: 40rpx;
		position: relative;
		top: 8rpx;
	}
		
	.left{
		font-size: 38rpx;
		margin-left: 20rpx;
	}

.imgItem{
	display: flex;
	justify-content: flex-start;
	background-color: white;
	margin-top: 20rpx;

}
.imgItem image{
	width: 83px;
	padding: 20rpx 20rpx;
	}
	
.imgItem>.right{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.right>.botoom{
	display: flex;
	justify-content: space-between;
}
.money{
	 color: #fe9a69;
	 font-size: 34rpx;
	 margin-bottom: 15rpx;
}
.titles{
	  font-size: 38rpx;
	  color: black;
	  width: 242px;
}
.add {
		width: 39rpx;
		height: 39rpx;
		color: white;
		font-size: 36rpx;
		font-weight: 600;
		background-color: #fe9a69;
		border-radius: 50%;
		margin-top: 10rpx;
		line-height: 39rpx;
		text-align: center;
		position: relative;
		left: -17rpx;
	}
	.jian{
		position: relative;
		left: 22rpx;
		width: 39rpx;
		height: 39rpx;
		color: white;
		font-size: 36rpx;
		font-weight: 600;
		background-color: #fe9a69;
		border-radius: 50%;
		margin-top: 10rpx;
		line-height: 39rpx;
		text-align: center;
	}
	.number{
		
		
		margin:13rpx 37rpx;
	}
		.botoom{
			position: relative;
		}
	.addbox{
		display: flex;
		position: absolute;
		bottom: 6rpx;
		right: 0rpx;
	}
.showbox{
	height: 558px;
	position: relative;
	top: -16rpx;
}
</style>